<template>
    <div class="banner" :style="{
      backgroundColor: config.pageConfig.color,
    }">
        <div :style="{
          marginTop: config.pageConfig.marginTop + 'px',
          marginBottom: config.pageConfig.marginBottom + 'px',
        }">
            <div class="search-input" 
            :class="config.pageConfig.style == 2 ? 'shadow-style' : (config.pageConfig.position == 1 ? 'left' : 'center')" 
            :style="
              config.pageConfig.style == 3
                ? {
                    borderStyle: 'solid',
                    borderWidth: config.pageConfig.borderWidth + 'px',
                    borderColor: config.pageConfig.borderColor,
                    backgroundColor: config.pageConfig.componentColor,
                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                    borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                }
                : {
                    backgroundColor: config.pageConfig.componentColor,
                    borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
                    borderTopRightRadius: config.pageConfig.radiusTop + 'px',
                    borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
                    borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
                }
            ">
                <el-icon :style="{
                 color: config.pageConfig.iconColor
                }"><Search /></el-icon>
                <input v-model="config.pageConfig.searchWord"  placeholder="请输入" :style="{
                 color: config.pageConfig.textColor
                }" />
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: "Search",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
    pageConfig: {
        type: Object,
        default: {
            style: '3',
            borderColor: '#ededed',
            borderWidth: 1,
            color: '',
            componentColor: '#f2f2f2',
            iconColor: '#fd463e',
            textColor: '#999999',
            position: '1',
            searchWord: '',
            marginTop: 5,
            marginBottom: 5,
            radiusTop: 4,
            radiusBottom: 4,
        },
    },
});
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
</script>
<style lang="scss" scoped>
.banner {
    width: 100%;
    overflow: hidden;
}
.search-input{
    background: #f7f8fa;
    height: 38px;
    line-height: 38px;
    margin: 0 12px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 14px;
    input{
       margin-left:10px;
       height: 38px;
       line-height: 38px;
       padding:0; 
       background:transparent;
    }
    :deep(.el-icon){
      font-size:20px;
    }

}
.left{
    justify-content: flex-start;
}
.center{
    justify-content: center;
}
.shadow-style {
    border: none;
    box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
    -webkit-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
    -moz-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
}
</style>
  